<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="custom" @search="search"></u-search>
		</view>
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view class="personal-listitem" v-for="(item, idx) in list" :key="idx" :use-slot="true">
				<u-index-anchor :index="item.letter" />
				<view class="list-cell" v-for="(it, index) in item.data" :key="index"
					@click="navTo('/pages/sys/book/personal-details?id='+it.id)">
					<image class="user-images" :src="it.avatar" v-if="it.avatar!=''"></image>
					<image class="user-images" :src="defaultAvatar" v-else></image>
					<view class="user-name"><span>{{it.realName}}</span><span
							class="user-other">{{it.deptName}}</span></view>
				</view>
			</view>
		</u-index-list>
		<u-divider>已经到底了</u-divider>
	</view>

</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import PY from '@/common/pinyin.js';
	export default {
		components: {
			HeadNavBar
		},
		data() {
			return {
				keywords: '',
				scrollTop: 0,
				indexList: [],
				list: [],
				defaultAvatar: '',
				query: {
					current: 1,
					size: 50000
				},
			}
		},
		created() {
			this.userList();
		},
		onLoad() {
			this.defaultAvatar = this.vuex_config.defaultAvatar;
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// change(value) {
			// 	this.query.realName=value;
			// 	this.userList();
			// },
			custom(value) {
				this.query.realName=value;
				this.userList();
			},
			search(value) {
				this.query.realName=value;
				this.userList();
			},
			userList(){
				this.$u.api.user.list(this.query).then(res => {
					if (res.code == '200'){
						this.list =  this.pySegSort(res.data.records);
						this.list.forEach(item => {
							this.indexList.push(item.letter);
						})
					}else{
						this.$u.toast(res.message);
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			pySegSort(arr) {
			　　let letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split('');
			　　let segs = {};
			　　let indexedList = []
			　　// 创建一个以26个为key的对象
			　　letters.forEach(item => {
			　　　　segs[item] = [];
			　　})
			　　arr.forEach(item => {
			　　　　// 取姓氏并返回姓氏的拼音首字母
			　　　　let a = PY.ConvertPinyin(item.realName).substr(0, 1)
			　　　　// 在A-z之中写入对应字母的对象数组中，否则传入*对象数组里
			　　　　let regComfirm = /[A-Za-z]/.test(a)
			　　　　regComfirm ? segs[a.toLocaleUpperCase()].push(item) : segs['*'].push(item)
			
			　　})
			　　// 循环segs对象，转换为indexList组件需要的格式
			　　for (const [key, value] of Object.entries(segs)) {
			　　　　value.length && indexedList.push({
			　　　　　　letter: key,
			　　　　　　data: value
			　　　　})
			　　}
			　　indexedList.forEach(item => {
			　　　　if (item.data.length > 1) {
			　　　　　　// 这里是给相同拼音首字母进行排序
			　　　　　　item.data = item.data.sort((a, b) => {
			　　　　　　　　return a.realName.localeCompare(b.realName)
			　　　　　　})
			　　　　}
			　　})
			　　return indexedList;
			},
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 8px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
		border-bottom: 1px solid #ececec !important;
	}

	.personal-listitem .list-cell:last-of-type {
		border-bottom: 0 !important;
	}

	.user-images {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
	}

	.user-name {
		font-size: 32rpx;
		color: #000000;
		flex: 1;

		span {
			display: block;
		}

		.user-other {
			font-size: 26rpx;
			color: #999999;
			font-weight: normal;
		}
	}
</style>
